<template>
  <div>
    <el-form-item
      v-for="(item, index) in formList"
      :key="index"
      :label="item.label"
    >
      <el-radio-group
        v-model="form[item.model]"
        @change="(e) => changeRadio(e, item)"
      >
        <el-radio label="1">{{ item.trueRadio }}</el-radio>
        <el-radio v-model="form[item.model]" label="0">{{
          item.falseRadio
        }}</el-radio>
      </el-radio-group>
      <el-popover
        v-if="item.popoverContent"
        placement="right"
        width="200"
        trigger="hover"
        :content="item.popoverContent"
      >
        <i class="el-icon-warning-outline tipsIcon" slot="reference"></i>
      </el-popover>
      <el-input
        v-if="form[item.model] === '0'"
        v-model="form[item.inputModel]"
        :placeholder="item.placeholder"
        clearable
      ></el-input>
      <el-upload
        v-if="form[item.model] === '0'"
        class="uploader"
        :class="{ hide: form[item.imgProps].length > 4 }"
        multiple
        list-type="picture-card"
        action="http://localhost:3000/upload/"
        :file-list="form[item.showImg]"
        :on-success="(e) => handleSuccess(e, item.imgProps)"
        :on-preview="handlePreview"
        :on-remove="
          (file, fileList) => handleRemove(file, fileList, item.imgProps)
        "
        :before-upload="beforeUpload"
        :on-exceed="handleExceed"
        :limit="5"
        :name="'files'"
      >
        <i class="el-icon-plus uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import uploadMixin from '@/mixins/uploadMixins';
export default {
  name: 'GACloud',
  mixins: [uploadMixin],
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {},
      dataList: [
        {
          label: '登录页面状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: '登录口令状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: '平台消息记录信息状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: '登录告警状态无异常?',
          trueRadio: '是',
          falseRadio: '否',
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: '监控top-主机CPU使用率状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '使用率小于90％',
        },
        {
          label: '监控top-主机内存使用状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '使用率小于90％',
        },
        {
          label: '监控top-主机磁盘使用状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '使用率小于90％',
        },
        {
          label: '服务器状态监控状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '输入输出电压、温度',
        },
        {
          label: '所有节点状态:',
          trueRadio: '正常',
          falseRadio: '异常',
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
      ],
    };
  },
  computed: {
    formList() {
      let list = [];
      //53个状态
      for (let i = 49; i < 102; i++) {
        let obj = {
          device_id: i,
          device_status: this.form[`status${i}`],
          device_fault_reason: this.form[`remark${i}`],
          model: `status${i}`,
          inputModel: `remark${i}`,
          imgProps: `fileList${i}`,
          showImg: `showFileList${i}`,
          room_id: 7,
          img_list: JSON.stringify(this.form[`fileList${i}`]),
          ...this.dataList[i - 49],
        };
        list.push(obj);
      }
      this.$store.commit('getInspectionList', { data: list, index: 6 });
      return list;
    },
  },
  watch: {
    // formList: {
    //   handler(newV, oldV) {},
    //   deep: true,
    //   immediate: true,
    // },
    list: {
      handler(newV, oldV) {
        if (newV.length > 0) {
          const isEqual = newV.every((item, index) => {
            return item === oldV[index];
          });
          if (!isEqual) {
            newV.map((item, index) => {
              this.form[`status${index + 49}`] = item.device_status;
              this.form[`remark${index + 49}`] = item.device_fault_reason;
              this.form[`fileList${index + 49}`] =
                JSON.parse(item.img_list) || [];
              this.form[`showFileList${index + 49}`] =
                JSON.parse(item.img_list) || [];
            });
          }
          // console.log(this.formList, 111);
        }
      },
    },
  },
  created() {
    for (let i = 49; i < 102; i++) {
      this.$set(this.form, `status${i}`, '1');
      this.$set(this.form, `remark${i}`, '');
      this.$set(this.form, `fileList${i}`, []); //存图片地方
      this.$set(this.form, `showFileList${i}`, []); //用于回显展示图片
    }
    const list = [
      {
        label: '市局第一套存储集群',
      },
      {
        label: '国产化X86市局存储集群',
      },
      {
        label: '国产化arm交警存储集群',
      },
      {
        label: '云盘存储集群',
      },
      {
        label: '市局第二套高性能存储集群',
      },
      {
        label: '市局第四套存储集群',
      },
      {
        label: '市局第三套存储集群',
      },
      {
        label: '国产化arm市局存储集群',
      },
      {
        label: '交警存储集群',
      },
      {
        label: '交警高性能存储集群',
      },
      {
        label: '雪亮工程存储集群',
      },
    ];
    list.map((item) => {
      let i = 58;
      const arr = [
        {
          label: `${item.label}状态:`,
          model: `status${i}`,
          trueRadio: '正常',
          falseRadio: '异常',
          inputModel: `remark${i}`,
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: `${item.label}存储容量使用率小于70％?`,
          model: `status${i + 1}`,
          trueRadio: '是',
          falseRadio: '否',
          inputModel: `remark${i + 1}`,
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: `${item.label}monitor状态:`,
          model: `status${i + 2}`,
          trueRadio: '正常',
          falseRadio: '异常',
          inputModel: `remark${i + 2}`,
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
        {
          label: `${item.label}osd状态:`,
          model: `status${i + 3}`,
          trueRadio: '正常',
          falseRadio: '异常',
          inputModel: `remark${i + 3}`,
          placeholder: '请填写异常原因',
          popoverContent: '',
        },
      ];
      this.dataList = [...this.dataList, ...arr];
      i += 3;
    });
  },
};
</script>
